<template>
  <div class="avue-top" style="background-color: #f1f6f8;">
    <img src="../../../img/images/layout/dl_logo.png" class="police_badge" />
    <span class="bigTitle">辽中分局便捷出警系统</span>
    <span class="smallTitle">Liaozhong branch convenient police system</span>
    <div class="touxiangDiv">
      <img src="../../../img/images/layout/icon_touxiang.png" class="touxiang" />
      <span class="code">{{loginUserInfo.code}}</span>
      <!-- <div class="logout" @click="logout">
        <span class="text">退出</span>
      </div> -->
      <el-dropdown>
        <span class="el-dropdown-link">
          <span class="nick_name">{{loginUserInfo.realName}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="setPassword">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept">{{$t('navbar.switchDept')}}
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" :before-close="beforeClose" width="650px"
      class="form-dialog" append-to-body>
      <div>
        <userinfo @passwordBack="passwordBack" ref="passwordInfo"></userinfo>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    resetRouter
  } from '@/router/router'
  import {
    mapGetters,
    mapState
  } from "vuex";
  import {
    fullscreenToggel,
    listenfullscreen
  } from "@/util/util";
  import {
    getLoginUserInfo
  } from "@/api/user.js";
  import topLock from "./top-lock";
  import topMenu from "./top-menu";
  import topSearch from "./top-search";
  import topTheme from "./top-theme";
  import topLogs from "./top-logs";
  import topColor from "./top-color";
  import topNotice from './top-notice'
  import topLang from "./top-lang";
  import userinfo from "@/views/system/userinfo";

  export default {
    components: {
      topLock,
      topMenu,
      topSearch,
      topTheme,
      topLogs,
      topColor,
      topNotice,
      topLang,
      userinfo
    },
    name: "top",
    data() {
      return {
        userBox: false,
        userForm: {
          deptId: '',
          roleId: ''
        },
        userOption: {
          labelWidth: 70,
          submitBtn: true,
          emptyBtn: false,
          submitText: '切换',
          column: [{
              label: '部门',
              prop: 'deptId',
              type: 'select',
              props: {
                label: 'deptName',
                value: 'id'
              },
              dicUrl: '/api/blade-system/dept/select',
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请选择部门",
                trigger: "blur"
              }],
            },
            {
              label: '角色',
              prop: 'roleId',
              type: 'select',
              props: {
                label: 'roleName',
                value: 'id'
              },
              dicUrl: '/api/blade-system/role/select',
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请选择角色",
                trigger: "blur"
              }],
            },
          ]
        },
        passwordDialogVisible: false,
        loginUserInfo: {}
      };
    },
    filters: {},
    created() {},
    mounted() {
      listenfullscreen(this.setScreen);
      this.getLoginUserInfo();
    },
    computed: {
      ...mapState({
        showDebug: state => state.common.showDebug,
        showTheme: state => state.common.showTheme,
        showLock: state => state.common.showLock,
        showFullScren: state => state.common.showFullScren,
        showCollapse: state => state.common.showCollapse,
        showSearch: state => state.common.showSearch,
        showMenu: state => state.common.showMenu,
        showColor: state => state.common.showColor
      }),
      ...mapGetters([
        "userInfo",
        "isFullScren",
        "tagWel",
        "tagList",
        "isCollapse",
        "tag",
        "logsLen",
        "logsFlag",
        "nowPath"
      ])
    },
    methods: {
      getLoginUserInfo() {
        let that = this;
        console.log('userInfo', this.userInfo)
        getLoginUserInfo(this.userInfo.user_id).then(res => {
          console.log('登录信息', res);
          if (res.data.code === 200) {
            that.loginUserInfo = res.data.data;
          }
        })
      },
      handleScreen() {
        fullscreenToggel();
      },
      setCollapse() {
        this.$store.commit("SET_COLLAPSE");
      },
      setScreen() {
        this.$store.commit("SET_FULLSCREN");
      },
      switchDept() {
        const userId = this.userInfo.user_id;
        const deptColumn = this.findObject(this.userOption.column, "deptId");
        deptColumn.dicUrl = `/api/blade-system/dept/select?userId=${userId}`;
        deptColumn.display = true;
        const roleColumn = this.findObject(this.userOption.column, "roleId");
        roleColumn.dicUrl = `/api/blade-system/role/select?userId=${userId}`;
        roleColumn.display = true;
        this.userBox = true;
      },
      submitSwitch(form, done) {
        this.$store.dispatch("refreshToken", form).then(() => {
          this.userBox = false;
        })
        done();
      },
      logout() {
        this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
          confirmButtonText: this.$t("submitText"),
          cancelButtonText: this.$t("cancelText"),
          type: "warning"
        }).then(() => {
          this.$store.dispatch("LogOut").then(() => {
            resetRouter();
            this.$router.push({
              path: "/login"
            });
          });
        });
      },


      setPassword() {
        console.log("setPassword")
        this.passwordDialogVisible = true
      },
      showHelp() {
        let url = '/pdf/资产管理系统使用手册 (1).pdf';
        window.open(url, "_blank");
      },
      passwordBack(val) {
        if (val == "修改密码成功") {
          this.passwordDialogVisible = false
        }
      },
      beforeClose(done) {
        this.$refs.passwordInfo.beforeClose()
        done()
      },



    }
  };
</script>

<style lang="scss" scoped>
  .el-dropdown {
    position: absolute !important;
    top: 30px !important;
    left: 59px !important;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .avue-top {
    height: 96px !important;
    background-image: url("../../../img/images/layout/pic_toubu.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 1;

    .police_badge {
      width: 70px;
      height: 70px;
      position: absolute;
      top: 13px;
      left: 23px;
    }

    .bigTitle {
      position: absolute;
      top: 24px;
      left: 104px;
      font-size: 28px;
      font-family: Lantinghei SC, Lantinghei SC;
      font-weight: 800;
      color: #2E488B;
      line-height: 33px;
    }

    .smallTitle {
      position: absolute;
      top: 68px;
      left: 104px;
      font-size: 13px;
      font-family: Lantinghei SC, Lantinghei SC;
      font-weight: 600;
      color: #2E488B;
      line-height: 10px;
    }

    .touxiangDiv {
      width: 180px;
      height: 96px;
      position: absolute;
      top: 0;
      right: 0;

      .touxiang {
        position: absolute;
        top: 23px;
        left: 0px;
        width: 50px;
        height: 50px;
      }

      .nick_name {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #2A334D;
      }

      .code {
        position: absolute;
        top: 50px;
        left: 59px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #2A334D;
      }

      .logout {
        position: absolute;
        top: 50px;
        left: 146px;
        width: 44px;
        height: 18px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #2E488B;
        cursor: pointer;

        .text {
          position: absolute;
          top: 0px;
          left: 10px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
        }
      }
    }


  }

  .avue-main {
    .avue-tags .el-tabs--card>.el-tabs__header .el-tabs__item {
      color: #636c86;
    }

    .avue-tags {
      background-color: unset;
    }

    .avue-tags .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      color: #2878e8;
      border-color: #2878e8;
    }
  }

  .dialog-password {
    .avue-group .el-collapse-item__wrap {
      border-color: #f8f8f8;
    }

    .el-collapse-item__wrap {
      background-color: #f8f8f8;
    }
  }
</style>
